<template>
    <div class="message-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form label-width="110px" disabled>
                <el-form-item label="模板名称">
                    <el-input v-model="formData.templateName" />
                </el-form-item>
                <el-form-item label="传输方向">
                    <el-input v-model="formData.direction" />
                </el-form-item>
                <el-form-item label="模板命令字">
                    <el-input v-model="formData.templateCommand" />
                </el-form-item>
                <el-form-item label="命令字偏移">
                    <el-input v-model="formData.checkOffset" />
                </el-form-item>
                <el-form-item label="描述" style="width: 100%">
                    <el-input v-model="formData.templateDescription" type="textarea" show-word-limit />
                </el-form-item>
                <el-form-item label="报文模板属性" style="width: 100%" label-position="top">
                    <el-table :data="formData.attributes || []" style="width: 100%" border>
                        <el-table-column type="index" label="序号" width="60" align="center" fixed />
                        <el-table-column label="属性名称" prop="attributeName">
                            <template #default="scope">
                                <el-link type="primary" @click="onViewItem(scope.row)">
                                    {{ scope.row.attributeName }}
                                </el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="槽号" prop="slot" />
                        <el-table-column label="属性值">
                            <template #default="scope">
                                {{ AttributeCategory[scope.row.attributeCategory]
                                }}{{
                                    scope.row.attributeCategory === 'CONST'
                                        ? scope.row.attributeConstValue
                                        : TransSource[scope.row.transSource]
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="数据类型">
                            <template #default="scope">
                                {{ DataType[scope.row.attributeDataType] }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { IoTProtocolService } from '@great/services';
import { reactive } from 'vue';
import { showPopupBox, type PopupBoxProps } from '@great/utils';
import { DataType, TransSource, AttributeCategory } from '@/utils/constant';
import MessageAttrModal from './MessageAttrModal.vue';

interface IProps extends PopupBoxProps {
    row?: Record<string, any>;
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '查看报文模板',
    width: 900,
    detail: undefined
});

const formData = ref<any>({});
const getPrivateTemplate = async () => {
    const res = await IoTProtocolService.getPrivateTemplate(props.row?.templateNo);
    formData.value = res.data;
};
// 查看模板属性
const onViewItem = (row: any) => {
    showPopupBox(MessageAttrModal, {
        row: row,
        callBack: closeDialog
    });
};
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};
const init = () => {
    getPrivateTemplate();
};
init();
</script>
<style scoped lang="scss">
.message-modal-wrapper {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            width: calc((100% - 10px) / 2);
        }
    }
}
</style>
